<template>
  <jxtech-basic-header></jxtech-basic-header>
  <el-container>
    <el-aside :width="`${powerInfoState.asideWidth}px`" class="power-aside">
      <stationType
        @handleNodeClick="handleNodeClick"
        ref="stationTypeRef"
      ></stationType>
      <dragResize
        v-model:asideWidth="powerInfoState.asideWidth"
        v-model:dragIng="powerInfoState.dragIng"
      ></dragResize>
    </el-aside>
    <el-main class="power-main">
      <el-header style="padding: 0">
        <jxtech-add-button @click="addData()"></jxtech-add-button>
        <jxtech-save-button @click="saveData()"></jxtech-save-button>
        <jxtech-delete-button
          @click="deleteObj()"
          v-if="infoFormData.id"
        ></jxtech-delete-button>
      </el-header>
      <jxtech-model-form
        ref="JxtechModelFormRef"
        primary-key="id"
        :form-data="infoFormData"
        :rules="rules"
        :formStatus="infoFormData.id ? 'edit' : 'add'"
        :service-api="powerStationPowerInfoApi"
        @save-success="saveDataSuccess"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <jxtech-model-form-item prop="powerType" label="分类名称">
              <el-input v-model="infoFormData.powerType"></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <jxtech-model-form-item prop="parentName" label="父级分类">
              <jxtech-select-input
                style="width: 100%"
                v-model:inputValue="infoFormData.parentName"
                @select-click="chooseParent"
                @clear-click="parentClear"
              ></jxtech-select-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <jxtech-model-form-item prop="institutionCode" label="关联部门">
              <unit-select-input
                v-model:unitId="infoFormData.institutionCode"
                v-model:unitName="infoFormData.institutionName"
              ></unit-select-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <jxtech-model-form-item prop="orderNum" label="排序号">
              <el-input
                v-model="infoFormData.orderNum"
                type="number"
              ></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
      </jxtech-model-form>
    </el-main>
  </el-container>

  <el-dialog v-model="powerInfoState.parentDialog" width="30%" destroy-on-close>
    <template #title>
      <span class="jxtech-card-title">选择父级分类</span>
    </template>
    <div class="vms-unit-tree-dialog-body">
      <stationType isDialog ref="stationTypeDialogRef"></stationType>
    </div>
    <template #footer>
      <jxtech-cancel-button
        @click="powerInfoState.parentDialog = false"
      ></jxtech-cancel-button>
      <jxtech-ok-button @click="chooseParentOk"></jxtech-ok-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessageBox } from "element-plus";
import {
  messageInfoTip,
  messageSuccessTip,
  messageWarningTip,
} from "/@/utils/message-config";
import powerStationPowerInfoApi from "/@/api/base/bean/power-station-power-info";
import unitApi from "/@/api/org/bean/unit";
import UnitSelectInput from "/@/views/org/unit/component/unit-select-input.vue";
import stationType from "./component/type.vue";
import dragResize from "./component/drag-resize.vue";
import { onMounted, reactive, Ref, ref } from "vue";

let JxtechModelFormRef = ref();
let stationTypeRef = ref();
let stationTypeDialogRef = ref();

//表单数据
let infoFormData: Ref<any> = ref({});
//定义必填校验规则
const rules = {
  powerType: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
  parentName: [{ required: true, message: "请选择父级分类", trigger: "blur" }],
};
const handleNodeClick = function (data: any, node: any, tree: any) {
  // console.log("obj", obj);
  if (data.institutionCode) {
    unitApi.queryById(data.institutionCode).then((res) => {
      // console.log(res);
      data.institutionName = res.data ? res.data.unitName : null;
      infoFormData.value = data;
    });
  } else {
    infoFormData.value = data;
  }
};

const chooseParent = function () {
  powerInfoState.parentDialog = true;
};

const chooseParentOk = function () {
  let checkedNode = stationTypeDialogRef.value.getCheckedNode();
  if (checkedNode) {
    infoFormData.value.parentName = checkedNode.powerType;
    infoFormData.value.parentCode = checkedNode.powerTypeCode;
    powerInfoState.parentDialog = false;
  } else {
    messageWarningTip("请先选择数据");
  }
  console.log(checkedNode);
};

const parentClear = function () {
  infoFormData.value.parentName = "";
  infoFormData.value.parentCode = "";
};

const saveData = function () {
  JxtechModelFormRef.value.save();
};

const saveDataSuccess = function (data: any) {
  infoFormData.value = data;
  stationTypeRef.value.initTreeData(false);
};

const deleteObj = function () {
  ElMessageBox.confirm("此操作将永久删除该数据, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      powerStationPowerInfoApi.delete(infoFormData.value.id).then((res) => {
        messageSuccessTip("数据删除成功!");
        stationTypeRef.value.initTreeData(true);
      });
    })
    .catch(() => {
      // messageInfoTip("已取消删除!");
    });
};
const addData = function () {
  infoFormData.value = {
    parentName: infoFormData.value.powerType,
    parentCode: infoFormData.value.powerTypeCode,
  };
};
const powerInfoState = reactive({
  asideWidth: 300,
  dragIng: false,
  formData: {},
  parentDialog: false,
});
</script>
<style scoped lang="scss">
</style>